<%= open_graph_tags title: t(".title") %>

<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <% if @notifications.any? %>
    <div class="w-full max-w-xl mx-auto mt-6 mb-3 sm:mb-0">
      <div class="flex items-center justify-between space-x-4 mx-4 sm:mx-0">
        <div>
          <h1 class="text-2xl font-bold text-gray-900"><%= t(".title") %></h1>
        </div>
        <div class="flex space-x-3">
          <%= button_to t(".mark_all_as_read"), read_notifications_path, class: "inline-flex justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 cursor-pointer" %>
        </div>
      </div>
    </div>

    <%= render PagyPaginatorComponent.new(id: "notifications", pagy: @pagy, url_array: [:notifications]) do |component| %>
      <% component.loading_icon do %>
        <%= render LoadingComponent.new %>
      <% end %>
      <%= render @notifications %>
    <% end %>
  <% else %>
    <%= render EmptyStateComponent.new(t(".empty_state.title"), "bell", body: t(".empty_state.body"), cta: t(".cta"), cta_path: read_notifications_path, cta_icon: "search") %>
  <% end %>
</div>
